<template>
  <el-container>
    <el-aside width="200px">
      <el-row class="tac">
        <el-col :span="12">
          <h5>宠物疫苗管理系统</h5>
          <el-menu
            text-color="#fff"
            active-background-color="#5473E8"
            background-color="#424A71"
            :router="true"
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="select"
          >
            <el-menu-item index="1">
              <el-icon><icon-menu /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu v-if = "pasage.flag == 'doctor'" index="2">
              <template #title>
                <el-icon><location /></el-icon>
                <span>医院管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">医院列表</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu v-if = "pasage.flag == 'user'" index="3">
              <template #title>
                <el-icon><location /></el-icon>
                <span>预约管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">疫苗咨询</el-menu-item>
                <el-menu-item index="3-2">我的申请</el-menu-item>
                <el-menu-item index="3-3">我的预约</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu v-if = "pasage.flag == 'doctor'" index="4">
              <template #title>
                <el-icon><location /></el-icon>
                <span>接种管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1">预约列表</el-menu-item>
                <el-menu-item index="4-2">已接种列表</el-menu-item>
                <el-menu-item index="4-3">用户满意度</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
    <el-container>
      <el-header>
        <Header />
      </el-header>
      <el-main>
        <div class="box">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { useRoute } from "vue-router";
import { mockService } from "../../api/mock";
import { useStore, Commit } from "vuex";
import { defineComponent, ref, onMounted ,computed} from "vue";
import Header from "../../components/header/index.vue";
interface IData {
  activeName: any;
  title: any;
  innerTitle: any;
}
export default defineComponent({
  setup() {
    const store = useStore();
    const route = useRoute();
    const user = computed(()=>{
      return store.state.user
  })
  const b:any =  user.value.username
 const pasage = JSON.parse(localStorage.getItem(b) as any) 
  console.log(pasage);
    const handleClose = (key: string[], keyPath: string[]) => {
      console.log(key, keyPath);
    };
    const handleOpen = (key: string, keyPath: string[]) => {
      console.log("handleOpen触发了");
    };
    const select = (a: any, b: any, c: any) => {
      //  console.log(c)
      let titellist = [
        {
          id: "1",
          titel: "首页",
          innerTitel: "",
        },
        {
          id: "2-1",
          titel: "医院管理/",
          innerTitel: "医院列表",
        },
        {
          id: "3-1",
          titel: "预约管理/",
          innerTitel: "疫苗咨询",
        },
        {
          id: "3-2",
          titel: "预约管理/",
          innerTitel: "预约申请",
        },
        {
          id: "3-3",
          titel: "预约管理/",
          innerTitel: "我的预约",
        },
        {
          id: "4-1",
          titel: "接种管理/",
          innerTitel: "预约列表",
        },
        {
          id: "4-2",
          titel: "接种管理/",
          innerTitel: "已接种列表",
        },
        {
          id: "4-3",
          titel: "接种管理/",
          innerTitel: "用户满意度",
        },
      ];
      titellist = titellist.filter((item) => {
        return item.id == c.route;
      });
      // console.log(titellist);
      store.commit("changeTitle2", titellist);
    };
    onMounted(async () => {
      const res = await mockService.getServerList(1, 10);
      // list.value = res.result;
      console.log(res);

      // 提前调用一遍仓库中的改变title
      let titellist = [
        {
          id: "1",
          titel: "首页",
          innerTitel: "",
        },
        {
          id: "2-1",
          titel: "医院管理/",
          innerTitel: "医院列表",
        },
        {
          id: "3-1",
          titel: "预约管理/",
          innerTitel: "疫苗咨询",
        },
        {
          id: "3-2",
          titel: "预约管理/",
          innerTitel: "预约申请",
        },
        {
          id: "3-3",
          titel: "预约管理/",
          innerTitel: "我的预约",
        },
        {
          id: "4-1",
          titel: "接种管理/",
          innerTitel: "预约列表",
        },
        {
          id: "4-2",
          titel: "接种管理/",
          innerTitel: "已接种列表",
        },
        {
          id: "4-3",
          titel: "接种管理/",
          innerTitel: "用户满意度",
        },
      ];
      titellist = titellist.filter((item) => {
        return item.id == route.path.replace("/home/", "");
      });
      // console.log(this.$route.path.replace('/home/',''));

      store.commit("changeTitle2", titellist);
    });

    return { handleClose, handleOpen, select ,pasage};
  },
  // mounted(){

  // },
  data() {
    return {
      activeName: "first",
      title: "",
    } as IData;
  },
  methods: {
    handleClick(tab: any, event: string[]) {
      console.log(tab);

      // this.$store.commit('changeTitle2', titellist)
    },
  },
  
  components: {
    Header,
  },
});
</script>
<style type="text/css">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
<style lang="less" scoped>
.box {
  flex: 89;
}

/deep/.el-col-12 {
  max-width: 100%;
}
/deep/.el-col {
  flex: 11;
  background: #424a71;
  font-size: 20px;
  color: #ffffff;
  line-height: 26px;
  text-align: center;
  padding-top: 20px;
  height: 100%;
}
/deep/.el-menu li:nth-of-type(1) {
  text-align: center;
  // display: block;
}
// /deep/.el-col .el-col-12{
//   width: 186px;
// }
// /deep/.el-menu-item {
//   width: 186px;
// }
/deep/.el-sub-menu .el-menu-item {
  // min-width: 186px;
  line-height: 26px;
  color: #697a95;
  font-size: 14px;
  height: 26px;
  justify-content: center;
  text-align: center;
}
/deep/.el-menu-item.is-active {
  color: #5473e8;
}
/deep/.el-container {
  height: 100%;
}
// /deep/.el-sub-menu {
//   width: 186px;
// }
/deep/.el-row {
  border: none;
}
/deep/.el-tabs__item.is-active {
  color: white;
  background: #5473e8;
}
</style>
<style lang="less">
body {
  background: #f5f7fd;
}
#app {
  height: 100%;
}
.el-row {
  height: 100%;
  display: flex;
}
.el-container {
  height: 100%;
}
.el-header {
  padding: 0;
}
</style>
